@include('backstage/public/_header')
    <style type="text/css">
        i.tree{
            float: left;
            font-style:normal;
            height: 28px;
            line-height: 28px;
            font-size: 28px;
            font-weight: 700;
        }
        span.m_name{line-height: 30px;}
        table.list_tab tr td, table.list_tab tr th{padding:0 5px;}
        table.list_tab tr{line-height: 20px;height: 20px;}
    </style>

    <!--結果頁快捷搜索框 開始-->
        <!-- <form action="" method="post">
            <table class="search_tab">
                <tr>
                    <th width="120">選擇分類:</th>
                    <td>
                        <select onchange="javascript:location.href=this.value;">
                            <option value="">全部</option>
                            <option value="http://www.baidu.com">百度</option>
                            <option value="http://www.sina.com">新浪</option>
                        </select>
                    </td>
                    <th width="70">關鍵字:</th>
                    <td><input type="text" name="keywords" placeholder="關鍵字"></td>
                    <td><input type="submit" name="sub" value="查詢"></td>
                </tr>
            </table>
        </form> -->

    <!--結果頁快捷搜索框 結束-->

    <!--搜索結果頁面 列表 開始-->
    <!-- <form action="#" method="post"> -->
        <div class="result_wrap">
            <!--快捷導航 開始-->
            <div class="result_content">
                <div class="short_wrap">
                    <a href="add"><i class="fa fa-plus"></i>新增菜單</a>
                    <a href="javascript:void(0);" onclick="del();" ><i class="fa fa-recycle"></i>批量刪除</a>
                    <a href="javascript:void(0);" onclick="window.location.reload();"><i class="fa fa-refresh"></i>更新排序</a>
                </div>
            </div>
            <!--快捷導航 結束-->
        </div>

        <div class="result_wrap">
            <div class="result_content">
                <table class="list_tab">
                    <tr>
                        <th class="tc" width="5%"><input type="checkbox" id="checkAll" value="0"></th>
                        <th class="tc" width="5%">排序</th>
                        <th class="tc" width="5%">ID</th>
                        <th class="tc">菜單名稱</th>
                        <th class="tc" width="20%">控制器</th>
                        <th class="tc" width="20%">添加時間</th>
                        <th class="tc" width="20%">操作</th>
                    </tr>

                    @foreach ($list as $v)
                    <tr id="list_{{$v->id}}" class="leve_{{$v->level}}" typeid="{{$v->id}}" parentid="{{$v->pid}}">
                        <td class="tc"><input type="checkbox" name="checkbox" value="{{$v->id}}"></td>
                        <td class="tc">
                            <input type="text" onkeyup="value=value.replace(/[^\d{1,}\-\d{1,}|\d{1,}]/g,'')" onblur="sort('sort',{{$v->id}})" maxlength="3" value="{{$v->sort_order}}" sort="{{$v->sort_order}}" id="sort_{{$v->id}}" >
                        </td>
                        <td class="tc">{{$v->id}}</td>
                        <td>
                            @if($v->son_count>0)<i class="fa fa-minus-square-o" style="cursor:pointer;" data="son"></i>@endif{!!$v->menu_name!!}
                        </td>
                        <td class="tc">{{$v->action}}</td>
                        <td class="tc">@if($v->add_time!=0) {{date('Y-m-d H:i:s',$v->add_time)}} @endif</td>
                        <td class="tc">
                            <a href="edit/{{$v->id}}">修改</a>
                            <a href="javascript:void(0);" onclick="del({{$v->id}});">刪除</a>
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>
    <!-- </form> -->
    <!--搜索結果頁面 列表 結束-->
    <script type="text/javascript">
        $(function(){
            $(".list_tab").bind("click", function(event){
                var _this = $(event.target);//獲取當前點擊元素
                if(!$(_this).attr("data")) return ;//如果被點擊的元素不是span即+-號就不繼續執行
                var _parents = $(event.target).parents('tr');//獲取當前點擊元素所在行
                // 判斷是否加載子地區
                var typeid = $(_parents).attr('typeid');
                // var sonTree = $('input[type="checkbox"]');
                // var sonTree = $('.list_tab tr[parentid="'+typeid+'"]');//子集
                var sonArr = getSon(typeid);//子孫集
                // 判斷是否有子元素是否有子元素
                if($(_this).hasClass('fa-plus-square-o')){
                    $(_this).addClass('fa-minus-square-o').removeClass('fa-plus-square-o');
                    for(var i = 0; i < sonArr.length; i++){
                        if(sonArr[i].attr('parentid')==typeid){
                            sonArr[i].show();
                        }else{
                            var pid = sonArr[i].attr('parentid');
                            $parent = $(".list_tab tr[typeid="+pid+"]").find('i.fa').hasClass('fa-minus-square-o');
                            // console.log($aa);
                            if($parent){
                                sonArr[i].show();
                            }
                        }
                    }
                }else{
                    $(_this).addClass('fa-plus-square-o').removeClass('fa-minus-square-o');
                    for(var i = 0; i < sonArr.length; i++){
                        sonArr[i].hide();
                    }

                }
                
            });
        });
        // 判斷是否有子元素是否有子元素，如果有放回所有的子集
        function getSon(id,sonArr=[]){
            var sonTree = $('.list_tab tr[parentid="'+id+'"]');//子集
            sonArr.unshift(sonTree);
            for(var i = 0; i < sonTree.length; i++){
                var typeid = $(sonTree[i]).attr('typeid');//孫集typeid
                var grandson = $('.list_tab tr[parentid="'+typeid+'"]');//孫集
                if(grandson.length>0){
                    sonArr = getSon(typeid,sonArr);
                }
            }
            return sonArr;
        }
        function sort(name,id){
            var olddata = $('#'+name+'_'+id).attr('sort');
            var getdata = $('#'+name+'_'+id).val();
            if(olddata != getdata ){
                $.post("{{$update_sort}}", { 'id': id,'sort': $('#'+name+'_'+id).val(),"_token":"{{ csrf_token() }}"},
                function (data){
                    // console.log(data);
                    if(data.status==1){
                        $('#'+name+'_'+id).attr('sort',getdata);
                    }
                    if(data.status==-1){
                        layer.alert(data.message, {icon: 2,anim:6});
                    }
                    if(data.status==0){
                        layer.msg(data.message, {icon: 2});
                        // window.location.reload(); 
                        $('#'+name+'_'+id).val(olddata);
                    }
                }, "json");
            }
        }
        function getChecked() {
            var gids = new Array();
            $.each($('input:checked'), function(i, n){
                if($(n).val()!=0) gids.push( $(n).val() );
            });
            return gids;
        }
        //刪除
        function del(aid){
            aid = aid ? aid : getChecked();
            // console.log(aid);
            //詢問框
            layer.confirm('刪除後不可恢復，確定要刪除嗎？', {
              btn: ['確定','取消'] //按鈕
            }, function(){
                aid = aid.toString();
                // console.log(aid);
                if(aid == '') return layer.msg('未選中任何數據', {icon: 2,anim: 6});
                // layer.msg('正在刪除...', {icon: 16,shade: 0.01});
                $.post("{{$dodel}}", { 'idstr':aid,"_token":"{{csrf_token()}}"},
                function (data){
                    if(data.status==1){
                        layer.msg('正在刪除...', {icon: 16,shade: 0.01});
                        setTimeout(function(){
                            aid = aid.split(',');
                            $.each(aid, function(i,n){
                                $('#list_'+n).remove();
                            });
                            layer.msg(data.message, {icon: 1});
                        },2000);
                    }else if(data.status==0){
                        layer.msg(data.message, {icon: 2});
                    }else if(data.status==-1){
                        layer.alert(data.message, {icon: 2,anim:6});
                    }else if(data.status==2){
                        layer.msg(data.message, {icon: 7});
                    }else{
                        layer.msg('未知原因，刪除失敗', {icon: 2});
                    }
                }, "json");
            }, function(){
              // layer.msg('未做任何操作', {
              //   time: 20000, //20s後自動關閉
              //   btn: ['明白了', '知道了']
                // layer.msg('未做任何操作', {icon: 2});
            });
            
        }
    </script>
@include('backstage/public/_footer')